<template>
    <!-- App Capsule -->
    <!-- test vscode pull&push -->
    <div id="appCapsule">
        <div class="section mt-2 text-center">
            <h1 class="text-white">登录</h1>
            <h3 class="text-danger">内测中~，可直接点击登录进入主页</h3>
        </div>
        <div class="section mb-5 p-2">
                <div class="card">
                    <div class="card-body pb-1">
                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label" for="phone_number">手机号</label>
                                <div class="d-flex">
                                  <input type="tel" class="form-control p-0" id="phone_number" name="phone_number" placeholder="填入手机号" v-model="form.phone">
                                  <i class="ion ion-md-close-circle-outline clear-input" @click="form.phone = ''">
                                  </i>
                                </div>
                            </div>
                        </div>
                        <div class="form-group basic">
                            <div class="input-wrapper">
                                <label class="label" for="verify_code">验证码</label>
                              <div class="d-flex">
                                  <input type="number" class="form-control p-0" id="verify_code" name="verify_code" autocomplete="off" placeholder="填入验证码" v-model="form.code">
                                  <i class="ion ion-md-close-circle-outline clear-input" @click="form.code = ''"></i>
                                  <button class="btn btn-primary get_verify_code" :disabled=showDiv.disability @click="showDiv.startCountdown" v-show="showDiv.value">{{ showDiv.text }}</button>
                              </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-button-group transparent">
                    <button type="submit" class="btn btn-primary btn-block btn-lg" @click="submitJump">登录</button>
                </div>
        </div>

    </div>
    <!-- * App Capsule -->
</template>

<script>
import axios from "../utils/axios-plugin.js";
import {defineComponent, ref, toRefs, reactive, onMounted, onActivated, onDeactivated,watch} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";

export default defineComponent({
  setup(){
    const form = reactive({
      form:{
        phone:'',
        code:''
      }
    })
    //实现验证码按钮功能需求
    const showDiv = reactive({
      value : false,
      text : '获取验证码',
      disability : false,
      startCountdown(){
        axios.defaults.baseURL = 'https://zmkm.taotaohan.love/backend'
        axios.get('/vCode',{
          params:{
            phone_number:form.form.phone
          }
        })
            .then(res=>{
              if (res.status === 'success') alert('发送成功')
            })
        this.text = '获取验证码(60s)';
        this.disability = true;
        let count = 59;
        const interval = setInterval(()=>{
          this.text = '获取验证码('+count+'s)';
          count--;
          if(count < 0){
            clearInterval(interval);
            this.text = '获取验证码';
            this.disability = false;
          }
        },1000);
      }
    })
    watch(()=>form.form.phone,(phoneVal)=>{
      showDiv.value = phoneVal.length === 11;
    })

    // 获取当前router
    const router = useRouter()
    const state = useStore()

    function submitJump(){
      //use for test
      // localStorage.setItem('isLogin','true')
      // router.push('/index');
      // //use for test
      axios.defaults.baseURL = 'https://zmkm.taotaohan.love/backend'
      axios.post('/login',{
        phone_number:form.form.phone,
        code:form.form.code
      })
      .then(response =>{
        if(response.status === 'success'){
          localStorage.setItem('token',response['access_token']);
          axios.defaults.baseURL = 'https://zmkm.taotaohan.love/backend/api'
          axios.post('/user/baseInfo')
          .then(res =>{
            state.commit('setAvatar', { avatar: res['avatar'] });
            state.commit('setNickName',{ nickname: res['nickname']});
            state.commit('setSchedule',{ schedule: res['schedule']});
            sessionStorage.setItem('isLogin','true')
            router.push('/index');
          })
        }else{
          console.log('failed');
          alert(response.error)
          //失败弹窗
        }
      })
    }
    return {
      ...toRefs(form),
      showDiv,
      submitJump
    }
  }
})
</script>

<style lang="scss" scoped>
#appCapsule{
  background-image: url("../assets/img/back.jpg");
  background-size: cover;
  background-position: left;
  height: 100vh;
}
.get_verify_code{
  font-size: 14px;
  min-width: max-content;
  margin-left: 0.5rem;
}
</style>